<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
<div >
    <child v-for="item in sites" v-bind:message="item"></child>
</div>

<div >
    <ul>
        <li v-for="site in sites" v-model="site">
          {{site.name}}
        </li>
      </ul>
  </div>

<div>
    <form >
        <input type="text" v-model:trim="form.name"/>
        <input type="text" v-model="form.tel"/>
        <input type="text" v-model="form.flag"/>
        <input type="button" v-on:click="submit" value="提交"/>
        <label>{{show}}</label>
      </form>
</div>

<ul>
  <li v-for="(v,k,i) in form" >
   {{v}}-{{k}}-{{i}}
  </li>
</ul>
<formPlus v-bind:form="form"></formPlus>

</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<h4>{{ message.name }}</h4>'
});

Vue.component("formPlus", {
   props:["form"],
   template:  `
   <form >
      <input type="text" v-model:trim="form.name"/>
      <input type="text" v-model="form.tel"/>
      <input type="text" v-model="form.flag"/>
      <input type="button" v-on:click="submit" value="提交"/>
      <label>{{show}}</label>
    </form>
   `
})

// 创建根实例
new Vue({
  el: '#app',
  data: {
    form:{
      name: "",
      tel :"",
      flag:""
    },
    show:'',
    parentMsg: '父组件内容',
    sites:[
      {name:"123"},
      {name:"4"},
      {name:"5"},
    ]
  },
  methods:{
    submit:function(){
      var str = `名字：${this.form.name}，电话${this.form.tel}，标记${this.form.flag}`;
      this.show = str;
      console.log( str);
      return false;
    }
  }
})
</script>

<script>
  
</script>
</body>
</html>